<template>
  <div class="dashboard-container">
    <!-- 波浪导航栏 -->
    <div class="wave-header">
      <div class="wave-container">
        <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none">
          <defs>
            <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="wave-parallax">
            <use xlink:href="#wave" x="50" y="0" fill="rgba(25, 118, 210, 0.7)" />
            <use xlink:href="#wave" x="50" y="3" fill="rgba(25, 118, 210, 0.5)" />
            <use xlink:href="#wave" x="50" y="6" fill="rgba(25, 118, 210, 0.3)" />
          </g>
        </svg>
      </div>
      <div class="nav-content">
        <div class="logo-container">
          <div class="logo">
            <div class="logo-icon">
              <el-icon :size="40"><School /></el-icon>
            </div>
            <div class="logo-text">
              <h1>研究生招生系统</h1>
              <p>Graduate Enrollment System</p>
            </div>
          </div>
        </div>
        <div class="user-info">
          <div class="user-details">
            <span>欢迎回来，{{ studentName }}</span>
            <p>上次登录：{{ lastLogin }}</p>
          </div>
          <el-avatar :size="48" :src="avatar" />
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <main>
      <!-- 大图区域 -->
      <div class="main-image">
        <img src="../student/page_header.png" alt="校园风景" />
        <div class="image-overlay">
          <h2>探索学术世界，开启研究生之旅</h2>
          <p>提供全方位的招生服务与学术支持</p>
        </div>
      </div>

      <!-- 功能按钮区域 -->
      <div class="function-section">
        <div class="section-title">
          <el-icon><Menu /></el-icon>
          <h3>快捷服务</h3>
        </div>
        <div class="function-buttons">
          <div
              v-for="(btn, index) in buttons"
              :key="index"
              class="function-button"
              @click="handleButtonClick(btn.name)"
          >
            <div class="button-icon">
              <el-icon :size="36"><component :is="btn.icon" /></el-icon>
            </div>
            <span>{{ btn.name }}</span>
          </div>
        </div>
      </div>

      <!-- 信息展示区域 -->
      <div class="info-section">
        <!-- 通知公告 -->
        <div class="info-card">
          <div class="card-header">
            <el-icon><Bell /></el-icon>
            <h2>通知公告</h2>
          </div>
          <ul class="notice-list">
            <li v-for="(notice, index) in notices" :key="index">
              <el-icon><Reading /></el-icon>
              <span>{{ notice.title }}</span>
              <span class="date">{{ notice.date }}</span>
            </li>
          </ul>
        </div>

        <!-- 教改动态 -->
        <div class="info-card">
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <h2>教改动态</h2>
          </div>
          <ul class="dynamic-list">
            <li v-for="(dynamic, index) in dynamics" :key="index">
              <el-icon><Star /></el-icon>
              <span>{{ dynamic.title }}</span>
              <span class="date">{{ dynamic.date }}</span>
            </li>
          </ul>
        </div>
      </div>
    </main>

    <!-- 底部区域 -->
    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>联系方式</h3>
          <p><el-icon><Location /></el-icon> 四川省成都市锦江区四川大学锦江学院</p>
          <p><el-icon><Phone /></el-icon> 028-12345678</p>
          <p><el-icon><Message /></el-icon> jwc@scujj.edu.cn</p>
        </div>

        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="qrcode-container">
            <div class="qrcode">
              <div class="qrcode-placeholder"></div>
              <p>招生公众号</p>
            </div>
            <div class="qrcode">
              <div class="qrcode-placeholder"></div>
              <p>教务公众号</p>
            </div>
          </div>
        </div>

        <div class="footer-section">
          <h3>快速链接</h3>
          <p><a href="#">研究生院主页</a></p>
          <p><a href="#">招生简章</a></p>
          <p><a href="#">导师信息</a></p>
          <p><a href="#">常见问题</a></p>
        </div>
      </div>

      <div class="copyright">
        <p>© 2023 四川大学锦江学院研究生院 版权所有 | 蜀ICP备12345678号</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import {
  School, Bell, Document, Reading, Star,
  Menu, ArrowRight, Location, Phone, Message,
  Edit, ScaleToOriginal, Comment, Histogram, MessageBox
} from '@element-plus/icons-vue'

// 学生信息
const studentName = ref('张同学')
const lastLogin = ref('2023-09-20 14:30')
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const router = useRouter()

// 功能按钮
const buttons = ref([
  { name: '报考', icon: Edit },
  { name: '本研博对比', icon: ScaleToOriginal },
  { name: '评教', icon: Comment },
  { name: '学校校史', icon: Histogram },
  { name: '意见箱', icon: MessageBox }
])

// 通知公告
const notices = ref([
  { title: '2023年研究生招生简章正式发布', date: '2023-09-01' },
  { title: '关于研究生报名系统开放的通知', date: '2023-09-05' },
  { title: '研究生导师双选会时间安排', date: '2023-09-10' },
  { title: '研究生奖学金评定办法更新', date: '2023-09-12' },
  { title: '研究生新生报到指南', date: '2023-09-15' }
])

// 教改动态
const dynamics = ref([
  { title: '研究生培养方案优化说明', date: '2023-08-20' },
  { title: '跨学科研究生培养项目启动', date: '2023-08-25' },
  { title: '研究生课程改革试点通知', date: '2023-08-30' },
  { title: '研究生实践基地建设进展', date: '2023-09-03' },
  { title: '研究生学术论坛征稿通知', date: '2023-09-08' }
])

const handleButtonClick = (btnName) => {
  if (btnName === '报考') {
    router.push('/application');
  } else if (btnName === '学校校史') {
    router.push('/school-history');
  } else if (btnName === '意见箱') {
    router.push('/feedback'); // 添加意见箱路由跳转
  } else {
    console.log(`点击了 ${btnName} 按钮`);
  }
}

// 查看更多
const viewMore = (type) => {
  console.log(`查看更多的${type === 'notice' ? '通知公告' : '教改动态'}`)
}
</script>

<style scoped>
.dashboard-container {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  color: #333;
}
/* 波浪导航栏样式 */
.wave-header {
  position: relative;
  background: linear-gradient(135deg,  #1a2b4b, #2c5282);
  color: white;
  height: 220px;
  overflow: hidden;
}

.wave-container {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.waves {
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.nav-content {
  position: relative;
  z-index: 1;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-content h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
}
.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9ff9, #2c5282);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logo-icon .el-icon {
  color: white;
}

.logo-text h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  letter-spacing: 1px;
}

.logo-text p {
  margin: 5px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-details {
  text-align: right;
}

.user-details span {
  font-size: 16px;
  font-weight: 500;
}

.user-details p {
  margin: 5px 0 0;
  font-size: 13px;
  opacity: 0.8;
}

/* 主内容区样式 */
main {
  padding: 20px 40px;
  flex: 1;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.main-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
  height: 320px;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
}

.image-overlay h2 {
  font-size: 28px;
  margin: 0 0 10px;
  font-weight: 600;
}

.image-overlay p {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

/* 功能区域 */
.function-section {
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.section-title h3 {
  margin: 0;
  font-size: 20px;
  color: #1a2b4b;
}

.section-title .el-icon {
  color: #2c5282;
  font-size: 24px;
}

.function-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.function-button {
  background: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.function-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #4a9ff9;
}

.button-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e6f2ff, #cce5ff);
}

.function-button .el-icon {
  color: #2c5282;
}

.function-button span {
  font-size: 16px;
  font-weight: 500;
  color: #1a2b4b;
}

/* 信息展示区域 */
.info-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.info-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1a2b4b;
}

.card-header .el-icon {
  color: #2c5282;
  font-size: 22px;
}

.notice-list, .dynamic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-list li, .dynamic-list li {
  padding: 15px 0;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.2s;
}

.notice-list li:hover, .dynamic-list li:hover {
  background-color: #f9fbfd;
}

.notice-list li:last-child, .dynamic-list li:last-child {
  border-bottom: none;
}

.notice-list .el-icon, .dynamic-list .el-icon {
  color: #2c5282;
  font-size: 20px;
  flex-shrink: 0;
}

.notice-content, .dynamic-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.notice-title, .dynamic-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.date {
  color: #777;
  font-size: 13px;
}

/* 底部样式 */
footer {
  background: linear-gradient(135deg, #1a2b4b, #2c5282);
  color: white;
  padding: 40px 20px 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 30px;
  gap: 40px;
}

.footer-section {
  flex: 1;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: #4a9ff9;
}

.footer-section p {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.9;
}

.footer-section a {
  color: #a0c6ff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: white;
  text-decoration: underline;
}

.qrcode-container {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.qrcode {
  text-align: center;
}

.qrcode-placeholder {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .info-section {
    grid-template-columns: 1fr;
  }

  .footer-content {
    flex-direction: column;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .main-image {
    height: 250px;
  }

  .function-buttons {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .nav-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .user-info {
    align-self: flex-end;
  }
}

@media (max-width: 576px) {
  .wave-header {
    height: 200px;
  }

  main {
    padding: 15px;
  }

  .function-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-section {
    gap: 20px;
  }

  .image-overlay h2 {
    font-size: 22px;
  }
}
</style>